<template>
  <scroll-view scroll-y style="height: 100vh;">
    <!-- 轮播图 -->
    <view class="swiper-card">
      <text class="title">泉州风光</text>
      <swiper circular indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(item, index) in swiperImages" :key="index">
          <image :src="item" style="width: 100%;" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 城市介绍 -->
    <view class="intro-card">
      <view class="section">
        <text class="title">城市介绍</text>
        <rich-text :nodes="CityIntro" class="city-intro-rich"></rich-text>
      </view>
    </view>

    <!-- 探索进度卡片 -->
    <view class="progress-card">
      <text class="progress-title">探索进度</text>
      <view class="progress-bar">
        <view class="progress-fill" :style="{ width: progress + '%' }"></view>
      </view>
      <text class="progress-percent">{{ progress }}%</text>
    </view>

    <!-- 城市选择 -->
    <view class="picker-card">
      <text class="title">选择城市</text>
      <picker mode="selector" :range="cities" @change="handleCityChange">
        <view class="picker-text">当前选择: {{ selectedCity }}</view>
      </picker>
    </view>

    <!-- 媒体展示 -->
    <view class="video-card">
      <text class="title">城市宣传</text>
      <video :src="videoSrc" controls style="width: 100%;"></video>
      <text class="video-title">泉州背景音乐</text>
      <button @click="playMusic">播放</button>
    </view>

    <!-- 偏好设置 - 已移动到最下方 -->
    <view class="preference-card">
      <text class="title">偏好设置</text>
      <view class="preference-item">
        <text>出行方式:</text>
        <radio-group @change="handleTravelModeChange">
          <label v-for="(mode, index) in travelModes" :key="index">
            <radio :value="mode.value" :checked="mode.value === travelMode" />
            <text>{{ mode.label }}</text>
          </label>
        </radio-group>
      </view>
      <view class="preference-item">
        <text>显示推荐景点:</text>
        <switch :checked="showRecommendations" @change="handleShowRecommendationsChange" />
      </view>
      <view class="preference-item">
        <text>探索半径 (km):</text>
        <slider :value="exploreRadius" @change="handleExploreRadiusChange" min="1" max="50" />
        <text>{{ exploreRadius }}km</text>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      swiperImages: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg',
        '/static/city4.jpg',
        '/static/city5.jpg'
      ],
      CityIntro: `
        <h4>海上丝绸之路起点 - 泉州</h4> 
        <p> 历史文化: 泉州是国务院首批公布的24个历史文化名城之一， 是古代 "海上丝绸之路"起点， 宋元时期被誉为 "东方第一大港"。 </p> 
        <p> 著名景点: 清源山、 开元寺、 泉州清净寺、 崇武古城、 洛阳桥等。 </p> 
        <p> 特色文化:拥有<span class='highlight'>南音</span>、 <span class='highlight'>木偶戏</span>和<span class='highlight'>闽南建筑</span>等丰富的非物质文化遗产。 </p>
      `,
      progress: 55,
      cities: ['福建省 - 泉州市 - 丰泽区', '福建省 - 厦门市 - 思明区', '福建省 - 福州市 - 鼓楼区'],
      selectedCity: '福建省 - 泉州市 - 丰泽区',
      travelModes: [
        { value: 'bus', label: '公交' },
        { value: 'car', label: '自驾' },
        { value: 'walk', label: '步行' }
      ],
      travelMode: 'bus',
      showRecommendations: true,
      exploreRadius: 10,
      videoSrc: '/static/city-video.mp4' // 假设视频文件在static目录下
    };
  },
  methods: {
    handleCityChange(e) {
      this.selectedCity = this.cities[e.detail.value];
    },
    handleTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    handleShowRecommendationsChange(e) {
      this.showRecommendations = e.detail.value;
    },
    handleExploreRadiusChange(e) {
      this.exploreRadius = e.detail.value;
    },
    playMusic() {

    }
  }
};
</script>

<style>
.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.section {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.city-intro-rich {
  font-size: 28rpx;
}

.highlight {
  color: #aa5500;
  font-weight: bold;
}

/* 卡片样式 */
.swiper-card{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin: 20rpx;
}
.intro-card{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin: 20rpx;
}
.progress-card{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin: 20rpx;
}
.picker-card{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin: 20rpx;
}
.preference-card{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin: 20rpx;
}
.video-card {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 20rpx;
}

/* 轮播图图片样式 */
.swiper-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
}

/* 探索进度卡片样式 */
.progress-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.progress-bar {
  width: 100%;
  height: 20rpx;
  background-color: #e0e0e0;
  border-radius: 10rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #007aff;
  border-radius: 10rpx;
}

.progress-percent {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
  display: block;
  text-align: right;
}

/* 城市选择样式 */
.picker-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 偏好设置样式 */
.preference-item {
  margin-top: 20rpx;
}

/* 媒体展示样式 */
.video-title {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
  display: block;
}
</style>